<template>
	<view class="container">
		<view class="title">
			<u-text text="消息" color="#333" size="18" bold></u-text>
			<u-text
				prefixIcon="/static/solver-message/clear-unread.png"
				:iconStyle="{
					width: '16px',
					height: '16px',
					marginRight: '5px'
				}"
				text="全部已读"
				color="#999"
				size="14"
				align="right"
			></u-text>
		</view>
		<view class="content">
			<view class="swiper-box">
				<u-swiper :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
			</view>
			<view class="list-box">
				<up-list :pagingEnabled="true" @scrolltolower="scrolltolower">
					<up-list-item>
						<MessageListItem
							iconName="/static/solver-message/system-message.png"
							:isAvatar="false"
							titleText="系统通知"
							:labelText="systemMessage"
							:messageNumber="systemMsgNum"
							:messageTime="systemMsgTime"
						/>
					</up-list-item>
					<up-list-item v-for="(item, index) in listData" :key="`recommend_${index}`">
						<MessageListItem
							:iconName="item.iconName"
							:isAvatar="true"
							:titleText="item.userName"
							:labelText="item.message"
							:messageNumber="item.messageNumber"
							:messageTime="item.messageTime"
						/>
					</up-list-item>
					<up-list-item>
						<up-loadmore line :status="isEnd ? 'nomore' : 'loadmore'"></up-loadmore>
					</up-list-item>
				</up-list>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from 'vue';
import MessageListItem from './components/list-item.vue';
defineOptions({
	name: 'SolverMessageIndex'
});

// 轮播图列表
const swiperList = ref<string[]>([
	'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	'https://cdn.uviewui.com/uview/swiper/swiper2.png',
	'https://cdn.uviewui.com/uview/swiper/swiper1.png'
]);

// 列表数据
const listData = ref<API.MessageResponse[]>([
	{
		messageNumber: 100,
		message: '这是一条信息',
		iconName: 'https://cdn.uviewui.com/uview/album/7.jpg',
		userName: '用户1',
		messageTime: '两小时前'
	}
]);

// 分页
const pageOption = reactive({
	page: 1,
	size: 10
});

// 总共多少条
const total = ref(0);

// 系统消息的简单形式
const systemMessage = ref('您有一个投递的标书被拒绝');

// 总共有多少条未读的系统消息
const systemMsgNum = ref(3);

// 最新的系统消息时间
const systemMsgTime = ref('1小时前');

// 是否到底了
const isEnd = computed(() => {
	return pageOption.page > Math.ceil(total.value / pageOption.size);
});

// 滚动到底部
const scrolltolower = () => {
	console.log('滚动到底部');
};
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';
.container {
	box-sizing: border-box;
	padding: 10px;
}
.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.content {
	width: 100%;
	height: calc(100% - 40px);
	overflow: auto;
}
</style>
